<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-11-15 17:22:17
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2025-01-08 17:40:05
 * @FilePath: \sr_system_manager_ui\src\components\ApplicantInfo\index.vue
 * @Description: 申请人信息 组件
-->
<script setup lang="ts">
const props = defineProps({
  firstTitle: {
    type: String,
    default: '学院（部）'
  },
  firstContent: {
    type: String,
    default: ''
  },
  secondTitle: {
    type: String,
    default: '工号'
  },
  secondContent: {
    type: String,
    default: ''
  },
  thirdTitle: {
    type: String,
    default: '姓名'
  },
  thirdContent: {
    type: String,
    default: ''
  },
})
</script>

<template>
  <div class="apply-info-area">
    <div class="area-title">申请人信息</div>
    <div class="area-content">
      <div class="w-1/3 flex flex-row">
        <div class="area-content-title first">{{ props.firstTitle }}</div>
        <div class="area-content-text">{{ props.firstContent  }}</div>
      </div>
      <div class="w-1/3 flex flex-row">
        <div class="area-content-title">{{ props.secondTitle }}</div>
        <div class="area-content-text">{{ props.secondContent }}</div>
      </div>
      <div class="w-1/3 flex flex-row">
        <div class="area-content-title">{{ props.thirdTitle }}</div>
        <div class="area-content-text">{{ props.thirdContent }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.apply-info-area {
  display: flex;
  flex-direction: column;
  height: 114px;
  background-color: white;
  .area-title {
    height: 40px;
    font-weight: bold;
    color: #1D2129;
    font-size: 14px;
    margin-top: 24px;
    margin-left: 20px;
  }
  .area-content {
    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid #BEDAFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    .area-content-title {
      height: 50px;
      width: 130px;
      font-size: 14px;
      color: #1D2129;
      font-weight: normal;
      padding-left: 16px;
      border: 1px solid #BEDAFF;
      background-color: #F6FAFF;
      display: flex;
      align-items: center;
    }
    .area-content-title.first {
      border-left: 10px;
    }
    .area-content-text {
      height: 50px;
      line-height: 22px;
      width: calc(100% - 130px);
      font-size: 14px;
      color: #1D2129;
      font-weight: normal;
      margin-left: 16px;
      padding-top: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>